<template>
  <div>
    <photoList :picList="picList" />
    <div style="padding:20px 30px">
      <el-image style="width: 100%; height: 350px"
                :src="hp_ac[0]"
                fit="cover"></el-image>
    </div>
    <div style="padding:20px 30px">
      <el-image style="width: 100%; height: 350px"
                :src="hp_ac[1]"
                fit="cover"></el-image>
    </div>
    <router-view />
  </div>
</template>

<script>
import photoModel from '../utils/photoModel'
import photoList from '../components/photoList'
export default {
  name: 'index',
  components: {
    photoList
  },
  data() {
    return {
      picList: photoModel[0],
      hp_ac: photoModel[1]
    }
  },
  mounted() {
    // console.log(this.photoModel)
  },
  methods: {
    enter(index) {
      this.picList[index].titleShow = true
    },
    leave(index) {
      this.picList[index].titleShow = false
    },
    selectPhoto(id) {
      this.$router.push({
        path: '/photoAlbum',
        query: { id }
      })
    }
  }
}
</script>
<style lang="less" scope>
.header {
  display: flex;
  flex-wrap: wrap;
  .block {
    margin: 30px;
    cursor: pointer;
    position: relative;
    .block_title {
      position: absolute;
      bottom: 4px;
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #ffffff;
      background-color: #000000;
      opacity: 0.4;
      font-size: 25px;
    }
  }
}
</style>
